
import React from 'react';
import { Menu, Dropdown } from 'antd';
import MemberItem from '../MemberItem';
import cass from 'classnames';
import s from './index.module.less';

export const permissionList = [
    { key: 'setHost', lable: '设为主办人', value: 'ishost' },
    { key: 'setManager', lable: '设为管理员', value: 'ismanager' },
];

export default function MemberList ({ mainKey, showList = [], members, hasBtn, handleMember, onAdd, onMinus }) {

    const renderMenu = (v, i, key) => {
        return (
            <Menu onClick={e => handleMember(e, v, i, key)}>
                {showList.reduce((pre, l) => {
                    if(!v[l.value]){ // 有对应权限就不显示
                        const arr = pre.concat();
                        arr.push(<Menu.Item key={l.key}>{l.lable}</Menu.Item>);
                        return arr
                    }
                    return pre;
                }, [])}
            </Menu>
        ) 
    }
    
    return (
        <div className={s.wrapList}>
            {members.length ? members.map((v, i) => (
                <Dropdown key={`menb${i}`} overlay={() => handleMember ? renderMenu(v, i, mainKey) : null } trigger={['contextMenu']} disabled={!hasBtn}>
                    <MemberItem data={v} canViewInfo />
                </Dropdown>
            )) : null}
            {hasBtn ? (
                <MemberItem 
                    onClick={onAdd}
                    color={'mainColor'}
                    borderColor={'mainBorderColor'}
                    data={{ 
                        username: <span className={cass('mdi mdi-plus', s.btn)} /> 
                    }} 
                />
            ) : null}
            {hasBtn && members.length ? ( 
                <MemberItem
                    onClick={onMinus}
                    color={'mainColor'}
                    borderColor={'mainBorderColor'}
                    data={{ 
                        username: <span className={cass('mdi mdi-minus', s.btn)} />
                    }}
                />
            ) : null }
        </div>
    )
    
}